<template>
  <div style="margin-top: 20px;margin-left: 20px;width: 1300px;">
    <div style="display: block;">
      <el-button style="width: 200px" @click="addNews">发布</el-button>
      <el-button style="width: 200px">清空</el-button>
    </div>
    <div id="div1">

    </div>
  </div>

</template>

<script>
import E from 'wangeditor'
import {postData} from '../common/remote'

let editor;
export default {
  name: "book",
  data() {
    return {
      News: {
        id:"",
        title: "",
        content: "",
        author: "",
        time : ""
      }
    }
  },
  // 这个钩子函数，会在页面渲染完成之后执行
  mounted() {
    // 创建富文本编辑器对象
    // 其他富文本：https://blog.csdn.net/davidhzq/article/details/100842866
    editor = new E('#div1')
    editor.config.height = 640

    editor.config.uploadImgServer="http://localhost:8181/editor/upload"
    editor.config.uploadImgHooks = {
      // 图片上传并返回结果，但图片插入错误时触发
      fail: function (xhr, editor, result) {
        console.log(result)
      },
      success: function (xhr, editor, result) {
        // 图片上传并返回结果，图片插入成功之后触发
        console.log(result, 'success')
      }
    }
    //设置图片文件上传时，使用的参数名，如果不设置，后端无法接收到这个参数
    editor.config.uploadFileName="file"
    editor.create()
  },
  methods: {
    //提示栏函数
    addNews() {
      this.News.content = editor.txt.html()
      /*request.post("/boot/news",this.News).then(msg=>{
        this.open("添加成功","success")
      })*/
      console.log(this.News)
      postData('/article/add',{content:this.News.content}).then(ret=>{
        console.log(ret)
      })
      //更多富文本配置：https://www.wangeditor.com/doc/pages/07-%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87/01-%E9%85%8D%E7%BD%AE%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%8E%A5%E5%8F%A3.html
    }
  }
}
</script>

<style scoped>

</style>